<template>
  <div class="rental-list-page">
    <div class="top-search-bar">
      <el-input placeholder="请输入区域、商圈或小区名开始找房" v-model="searchForm.query" clearable>
        <template #append>
          <el-button :icon="Search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>

    <div class="breadcrumb">
      <span>沈阳贝壳网</span> > <span>沈阳租房</span>
    </div>

    <!-- 筛选条件区域 -->
    <el-card class="filter-card">
      <div class="filter-row">
        <span class="filter-label">按区域</span>
        <div class="filter-options">
          <el-tag
            v-for="district in districts"
            :key="district.value"
            :type="searchForm.district === district.value ? '' : 'info'"
            effect="plain"
            round
            class="filter-tag"
            @click="selectFilter('district', district.value)"
          >
            {{ district.label }}
          </el-tag>
        </div>
        <!-- <span class="filter-label">按地铁线</span>
        <div class="filter-options">
          <el-tag type="info" effect="plain" round class="filter-tag">更多</el-tag>
        </div> -->
      </div>

      <div class="filter-row">
        <span class="filter-label">方式</span>
        <el-radio-group v-model="searchForm.rentalType" @change="handleSearch">
          <el-radio-button label="不限">不限</el-radio-button>
          <el-radio-button label="整租">整租</el-radio-button>
          <el-radio-button label="合租">合租</el-radio-button>
        </el-radio-group>
      </div>

      <div class="filter-row">
        <span class="filter-label">租金</span>
        <el-checkbox-group v-model="searchForm.rentRanges" @change="handleSearch">
          <el-checkbox label="≤2000元" value="0-2000"></el-checkbox>
          <el-checkbox label="2000-3000元" value="2000-3000"></el-checkbox>
          <el-checkbox label="3000-4000元" value="3000-4000"></el-checkbox>
          <el-checkbox label="4000-5000元" value="4000-5000"></el-checkbox>
          <el-checkbox label="5000-6000元" value="5000-6000"></el-checkbox>
          <el-checkbox label="6000-8000元" value="6000-8000"></el-checkbox>
          <el-checkbox label="8000-20000元" value="8000-20000"></el-checkbox>
          <el-checkbox label="≥20000元" value="20000+"></el-checkbox>
        </el-checkbox-group>
        <el-input-number v-model="searchForm.minRent" :min="0" placeholder="" controls-position="right" class="rent-input"></el-input-number>
        <span class="separator">-</span>
        <el-input-number v-model="searchForm.maxRent" :min="0" placeholder="" controls-position="right" class="rent-input"></el-input-number>
        <el-button type="primary" size="small" @click="handleSearch">确定</el-button>
      </div>

      <div class="filter-row">
        <span class="filter-label">户型</span>
        <el-checkbox-group v-model="searchForm.houseTypes" @change="handleSearch">
          <el-checkbox label="一居" value="一居"></el-checkbox>
          <el-checkbox label="两居" value="两居"></el-checkbox>
          <el-checkbox label="三居" value="三居"></el-checkbox>
          <el-checkbox label="四居+" value="四居+"></el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="filter-row">
        <span class="filter-label">朝向</span>
        <el-checkbox-group v-model="searchForm.orientations" @change="handleSearch">
          <el-checkbox label="东" value="东"></el-checkbox>
          <el-checkbox label="西" value="西"></el-checkbox>
          <el-checkbox label="南" value="南"></el-checkbox>
          <el-checkbox label="北" value="北"></el-checkbox>
          <el-checkbox label="南北" value="南北"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="more-filters-toggle" @click="showMoreFilters = !showMoreFilters">
        {{ showMoreFilters ? '收起' : '更多' }} <el-icon><ArrowUp v-if="showMoreFilters" /><ArrowDown v-else /></el-icon>
      </div>
      <div class="clear-filters">
        <el-button type="text" @click="resetSearch">清空条件</el-button>
      </div>
    </el-card>

    <div class="search-results-summary">
      已为您找到 <span class="result-count">{{ filteredHouses.length }}</span> 套 沈阳租房
    </div>

    <div class="sort-options">
      <el-tabs v-model="sortBy" @tab-click="handleSort">
        <el-tab-pane label="综合排序" name="default"></el-tab-pane>
        <el-tab-pane label="最新上架" name="newest"></el-tab-pane>
        <el-tab-pane label="价格" name="price"></el-tab-pane>
        <el-tab-pane label="面积" name="area"></el-tab-pane>
      </el-tabs>
    </div>

    <el-row :gutter="20" class="content-area">
      <el-col :span="18">
        <!-- 租房列表 -->
        <div class="house-list">
          <el-card v-for="house in paginatedHouses" :key="house.id" class="house-card" shadow="hover">
            <el-row>
              <el-col :span="8" class="house-image-col">
                <img :src="house.imageUrl" class="house-image" @click="viewHouseDetail(house.id)" />
              </el-col>
              <el-col :span="16" class="house-info-col">
                <h3 class="house-title" @click="viewHouseDetail(house.id)">{{ house.title }}</h3>
                <p class="house-location-area">{{ house.location }} / {{ house.area }}㎡ / {{ house.orientation }} / {{ house.rooms }}</p>
                <div class="house-tags">
                  <el-tag v-for="tag in house.tags" :key="tag" size="small" type="info">{{ tag }}</el-tag>
                </div>
                <div class="house-price">
                  <span class="price-value">{{ house.price }}</span>元/月
                </div>
              </el-col>
            </el-row>
          </el-card>
          <!-- 分页 -->
          <div class="pagination-block">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="totalHouses"
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <!-- 右侧二维码区域 -->
        <el-card class="qr-code-card">
          <img src="https://picsum.photos/id/250/200/200" alt="下载APP" class="qr-image" />
          <p class="qr-text">下载贝壳APP</p>
          <p class="qr-subtext">扫描上方二维码<br />随时查看新房源</p>
          <el-button type="text" class="learn-more-button">了解更多 ></el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Search,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()

// 搜索表单
const searchForm = ref({
  query: '',
  district: '',
  rentalType: '不限',
  rentRanges: [],
  minRent: null,
  maxRent: null,
  houseTypes: [],
  orientations: [],
})

const showMoreFilters = ref(false)

// 区域选项 - 沈阳
const districts = ref([
  { label: '不限', value: '' },
  { label: '和平区', value: '和平区' },
  { label: '沈河区', value: '沈河区' },
  { label: '大东区', value: '大东区' },
  { label: '皇姑区', value: '皇姑区' },
  { label: '铁西区', value: '铁西区' },
  { label: '于洪区', value: '于洪区' },
  { label: '浑南区', value: '浑南区' },
  { label: '沈北新区', value: '沈北新区' },
])

// 模拟租房数据
const mockHouses = ref([
  {
    id: 1,
    title: '整租 • 金都苑 2室1厅 东南',
    location: '和平区-金都苑',
    area: 78.00,
    orientation: '东南',
    rooms: '2室1厅1卫',
    price: 8000,
    imageUrl: 'https://picsum.photos/id/200/300/200',
    tags: ['官方核验', '新上', '精装'],
    rentalType: '整租',
    houseType: '两居',
    district: '和平区',
  },
  {
    id: 2,
    title: '整租 • 定慧西里 2室1厅 南/北',
    location: '海淀-定慧寺-定慧西里',
    area: 59.80,
    orientation: '南北',
    rooms: '2室1厅1卫',
    price: 6800,
    imageUrl: 'https://picsum.photos/id/201/300/200',
    tags: ['自营', '新上', '精装', '集中供暖', '押一付一', '随时看房', '首次出租'],
    rentalType: '整租',
    houseType: '两居',
    district: '铁西区',
  },
  {
    id: 3,
    title: '合租 • 东风小区 1室1卫 南',
    location: '大东区-东风小区',
    area: 15.00,
    orientation: '南',
    rooms: '1室1卫',
    price: 1500,
    imageUrl: 'https://picsum.photos/id/202/300/200',
    tags: ['合租', '首次出租'],
    rentalType: '合租',
    houseType: '一居',
    district: '大东区',
  },
  {
    id: 4,
    title: '整租 • 华润二十四城 3室2厅 南',
    location: '铁西区-华润二十四城',
    area: 120.00,
    orientation: '南',
    rooms: '3室2厅2卫',
    price: 9500,
    imageUrl: 'https://picsum.photos/id/203/300/200',
    tags: ['精装', '拎包入住'],
    rentalType: '整租',
    houseType: '三居',
    district: '铁西区',
  },
  {
    id: 5,
    title: '整租 • 新湖明珠城 4室2厅 南北',
    location: '浑南区-新湖明珠城',
    area: 180.00,
    orientation: '南北',
    rooms: '4室2厅2卫',
    price: 12000,
    imageUrl: 'https://picsum.photos/id/204/300/200',
    tags: ['豪华装修', '地铁周边'],
    rentalType: '整租',
    houseType: '四居+',
    district: '浑南区',
  },
  {
    id: 6,
    title: '合租 • 北陵公园附近 1室1卫 北',
    location: '皇姑区-北陵公园',
    area: 20.00,
    orientation: '北',
    rooms: '1室1卫',
    price: 1800,
    imageUrl: 'https://picsum.photos/id/205/300/200',
    tags: ['合租', '近地铁'],
    rentalType: '合租',
    houseType: '一居',
    district: '皇姑区',
  },
  {
    id: 7,
    title: '整租 • 万科城 2室1厅 东',
    location: '于洪区-万科城',
    area: 85.00,
    orientation: '东',
    rooms: '2室1厅1卫',
    price: 7000,
    imageUrl: 'https://picsum.photos/id/206/300/200',
    tags: ['精装', '朝阳'],
    rentalType: '整租',
    houseType: '两居',
    district: '于洪区',
  },
  {
    id: 8,
    title: '整租 • 盛京大厦 3室1厅 南',
    location: '沈河区-盛京大厦',
    area: 100.00,
    orientation: '南',
    rooms: '3室1厅1卫',
    price: 8500,
    imageUrl: 'https://picsum.photos/id/207/300/200',
    tags: ['办公商圈', '精装'],
    rentalType: '整租',
    houseType: '三居',
    district: '沈河区',
  },
  {
    id: 9,
    title: '合租 • 沈北大学城 1室1卫 西',
    location: '沈北新区-大学城',
    area: 18.00,
    orientation: '西',
    rooms: '1室1卫',
    price: 1200,
    imageUrl: 'https://picsum.photos/id/208/300/200',
    tags: ['近大学', '合租'],
    rentalType: '合租',
    houseType: '一居',
    district: '沈北新区',
  },
])

const sortBy = ref('default')
const currentPage = ref(1)
const pageSize = ref(10)

const filteredHouses = computed(() => {
  let filtered = mockHouses.value.filter(house => house.district.includes(searchForm.value.district))

  // 根据查询关键词过滤
  if (searchForm.value.query) {
    const query = searchForm.value.query.toLowerCase()
    filtered = filtered.filter(house =>
      house.title.toLowerCase().includes(query) ||
      house.location.toLowerCase().includes(query) ||
      house.district.toLowerCase().includes(query)
    )
  }

  // 根据租赁方式过滤
  if (searchForm.value.rentalType !== '不限') {
    filtered = filtered.filter(house => house.rentalType === searchForm.value.rentalType)
  }

  // 根据租金范围过滤
  if (searchForm.value.rentRanges.length > 0) {
    filtered = filtered.filter(house => {
      for (const range of searchForm.value.rentRanges) {
        const [min, max] = range.split('-').map(s => parseInt(s.replace(/[^\d]/g, '')))
        if (range.endsWith('+')) { // 处理 '20000+' 的情况
          if (house.price >= min) return true
        } else if (house.price >= min && house.price <= max) {
          return true
        }
      }
      return false
    })
  } else if (searchForm.value.minRent !== null || searchForm.value.maxRent !== null) {
    filtered = filtered.filter(house => {
      const min = searchForm.value.minRent !== null ? searchForm.value.minRent : -Infinity
      const max = searchForm.value.maxRent !== null ? searchForm.value.maxRent : Infinity
      return house.price >= min && house.price <= max
    })
  }

  // 根据户型过滤
  if (searchForm.value.houseTypes.length > 0) {
    filtered = filtered.filter(house => searchForm.value.houseTypes.includes(house.houseType))
  }

  // 根据朝向过滤
  if (searchForm.value.orientations.length > 0) {
    filtered = filtered.filter(house => searchForm.value.orientations.includes(house.orientation))
  }

  // 排序
  if (sortBy.value === 'price') {
    filtered.sort((a, b) => a.price - b.price)
  } else if (sortBy.value === 'area') {
    filtered.sort((a, b) => a.area - b.area)
  } else if (sortBy.value === 'newest') {
    // 假设id越大越新，实际项目中需要有时间戳字段
    filtered.sort((a, b) => b.id - a.id)
  }
  return filtered
})

const totalHouses = computed(() => filteredHouses.value.length)

const paginatedHouses = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredHouses.value.slice(start, end)
})

// 方法
const selectFilter = (type, value) => {
  if (type === 'district') {
    searchForm.value.district = searchForm.value.district === value ? '' : value
  }
  handleSearch()
}

const handleSearch = () => {
  currentPage.value = 1
}

const resetSearch = () => {
  searchForm.value = {
    query: '',
    district: '',
    rentalType: '不限',
    rentRanges: [],
    minRent: null,
    maxRent: null,
    houseTypes: [],
    orientations: [],
  }
  sortBy.value = 'default'
  currentPage.value = 1
}

const handleSort = () => {
  currentPage.value = 1
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

const viewHouseDetail = (houseId) => {
  ElMessage.info(`查看房源ID: ${houseId} 详情 (功能待完善)`)
  // router.push(`/credit/rental/${houseId}`)
}

onMounted(() => {
  handleSearch()
})
</script>

<style lang="scss" scoped>
.rental-list-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.top-search-bar {
  margin-bottom: 20px;
  .el-input {
    width: 100%;
    .el-input__inner {
      height: 45px;
      font-size: 16px;
    }
    .el-input-group__append {
      background-color: #409eff;
      color: #fff;
      .el-button {
        font-size: 20px;
      }
    }
  }
}

.breadcrumb {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
  span {
    margin-right: 5px;
    &:last-child {
      font-weight: bold;
      color: #303133;
    }
  }
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 20px;
  .filter-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .filter-label {
      flex-shrink: 0;
      width: 60px;
      font-size: 14px;
      color: #909399;
      margin-right: 15px;
    }
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      .filter-tag {
        cursor: pointer;
        font-size: 14px;
        padding: 5px 12px;
        height: auto;
        line-height: 1.5;
        border-color: #dcdfe6;
        color: #606266;
        &.active {
          background-color: #ecf5ff;
          border-color: #a0cfff;
          color: #409eff;
        }
      }
    }
    .el-radio-group {
      .el-radio-button {
        .el-radio-button__inner {
          font-size: 14px;
        }
      }
    }
    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      .el-checkbox {
        .el-checkbox__label {
          font-size: 14px;
        }
      }
    }
    .rent-input {
      width: 100px;
      margin-left: 10px;
    }
    .separator {
      margin: 0 5px;
      color: #909399;
    }
    .el-button--small {
      margin-left: 10px;
    }
  }
  .more-filters-toggle {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #409eff;
    cursor: pointer;
    .el-icon {
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .clear-filters {
    text-align: right;
    margin-top: 10px;
  }
}

.search-results-summary {
  font-size: 16px;
  color: #303133;
  margin-bottom: 15px;
  .result-count {
    font-weight: bold;
    color: #409eff;
  }
}

.sort-options {
  margin-bottom: 20px;
  .el-tabs__item {
    font-size: 15px;
    height: 40px;
    line-height: 40px;
  }
}

.content-area {
  .house-list {
    .house-card {
      margin-bottom: 20px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      .house-image-col {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .house-image {
        width: 100%;
        height: 160px; /* 调整图片高度 */
        object-fit: cover;
        border-radius: 4px;
      }
      .house-info-col {
        padding-left: 20px; /* 左侧图片，右侧信息，增加padding */
      }
      .house-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 0 10px;
      }
      .house-location-area {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }
      .house-tags {
        margin-bottom: 10px;
        .el-tag {
          margin-right: 8px;
          margin-bottom: 5px;
        }
      }
      .house-price {
        font-size: 18px;
        color: #ff5722;
        font-weight: bold;
        .price-value {
          font-size: 24px;
        }
      }
    }
    .pagination-block {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .qr-code-card {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    .qr-image {
      width: 150px;
      height: 150px;
      object-fit: cover;
      margin-bottom: 10px;
    }
    .qr-text {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }
    .qr-subtext {
      font-size: 12px;
      color: #999;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    .learn-more-button {
      font-size: 14px;
      color: #409eff;
      cursor: pointer;
    }
  }
}
</style> 